<template>
	<!-- 设备清单审核 -->
	<div>
		<v-container row class="text-subtitle-1 d-flex justify-center  align-left">
			<v-btn class="ml-2 mt-7" small tile color="primary"
				:disabled="this.ApprovalDialogModel.selectList.length<=0" @click="auditButtonClick">
				审核
			</v-btn>

			<v-divider class="mx-4" inset vertical></v-divider>
			<v-row class="mt-2">
				<v-col cols="12" sm="3" md="2">
					<v-text-field label="项目号" v-model="projectQuery.code" dense outlined>
					</v-text-field>
				</v-col>
				<v-col cols="12" sm="3" md="2">
					<v-text-field label="项目名称" v-model="projectQuery.name" dense outlined>
					</v-text-field>
				</v-col>

				<v-col cols="12" sm="3" md="2">
					<v-text-field label="设备名称" v-model="projectQuery.equiname" dense outlined>
					</v-text-field>
				</v-col>
				<v-col cols="12" sm="3" md="2">
					<v-select label="项目审核状态" v-model="projectQuery.status" :items="ApprovalStatusItems" dense outlined>
					</v-select>
				</v-col>

				<!-- ml-n16 前面加n是间距 -->
				<!-- class="ml-n16 mx-auto" -->
				<v-col cols="12" sm="2" md="2">
					<v-btn depressed color="primary" @click="loadPages">查询</v-btn>
					<v-btn class="ml-3" depressed color="primary" @click="refreshLoadPages">
						刷新</v-btn>
				</v-col>
			</v-row>
		</v-container>
		<br />
		<v-data-table :headers="equiHeaderList" :items="equiDataList" small fixed-header item-key="id" dense show-select
			class="text-no-wrap" loading-text="正在加载请稍等......" :loading="equiLoading" :options.sync="equiOptions"
			:footer-props="vuetifyDefaultPage" :server-items-length="equiTotalCount" @input="equiSelectEvent">
			<template v-slot:item.approvalstatusname="{ item }">
				<a v-if="item.approvalstatus==99" style="color: #67C23A;">{{item.approvalstatusname}}</a>
				<a v-else-if="item.approvalstatus==-1" style="color: red;">{{item.approvalstatusname}}</a>
				<a v-else>{{item.approvalstatusname}}</a>
			</template>
		</v-data-table>
		<auditdialog :ApprovalDialogModel="ApprovalDialogModel" :callBack="ApprovalComplateCallBack"></auditdialog>
	</div>

</template>

<script>
	import audit_dialog from '../components/audit/audit_dialog.vue'
	export default {
		name: 'project_audit',
		components: {
			auditdialog: audit_dialog
		},
		data: () => ({
			projectQuery: {
				code: '',
				name: '',
				equiname: '',
				status: 1,
			},
			ApprovalStatusItems: [],
			equiHeaderList: [],
			equiDataList: [],
			equiTotalCount: 0,
			equiLoading: true,
			equiOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
				// 'items-per-page-all-text': '100'
			},
			ApprovalDialogModel: {
				auditEquiDialog: false,
				selectList: [],
				submitUrl: ``,
			},
		}),
		watch: {
			equiOptions: {
				handler() {
					this.loadPages()
				},
				deep: true
			},
		},
		created() {
			this.loadApprovalStatusItems()
			this.getEquiHeaderList();
		},
		methods: {
			async loadApprovalStatusItems() {

				var response = await this.$httpRequest({
					url: `MES/MESCommon/GetTypes`,
					method: 'post',
					data: ['ApprovalStatus']
				})
				if (response.status == 1) {
					this.ApprovalStatusItems = response.data
				}
			},
			async loadPages() {
				this.equiLoading = true
				var response = await this.$httpRequest({
					url: `PDM/PDMEquiAudit/LoadPage?
						code=${this.projectQuery.code}&
						name=${this.projectQuery.name}&
						status=${this.projectQuery.status}&
						equiname=${this.projectQuery.equiname}&
						pageNumber=${this.equiOptions.page}&
						pageSize=${this.equiOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.equiDataList = response.data.result
					this.equiTotalCount = response.data.pagination.totalRecords
					this.equiLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			async refreshLoadPages() {
				this.projectQuery.code = ''
				this.projectQuery.name = ''
				this.projectQuery.equiname = ''
				this.projectQuery.status = null
				await this.loadPages()
			},
			equiSelectEvent(items) {
				this.ApprovalDialogModel.selectList = items
			},
			//点击审核
			auditButtonClick() {
				this.ApprovalDialogModel.auditEquiDialog = true
				this.ApprovalDialogModel.submitUrl = `PDM/PDMEquiAudit/AuditEqui`
			},
			ApprovalComplateCallBack() {
				this.loadPages()
			},
			getEquiHeaderList() {
				this.equiHeaderList = [{
						text: '设备编号',
						align: 'left',
						value: 'code',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '设备名称',
						align: 'left',
						value: 'name',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '数量',
						align: 'left',
						value: 'qty',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '单位',
						align: 'left',
						value: 'unit',
						filterable: false,
						class: 'fixed'
					},
					// {
					// 	text: '版本号',
					// 	align: 'center',
					// 	value: 'versioncode',
					// 	filterable: false,
					// 	class: 'fixed'
					// },
					// {
					// 	text: '机台号',
					// 	align: 'center',
					// 	value: 'machinecode',
					// 	filterable: false,
					// 	class: 'fixed'
					// },
					// {
					// 	text: '设计人员名称',
					// 	align: 'center',
					// 	value: 'design_username',
					// 	filterable: false,
					// 	class: 'fixed'
					// },
					// {
					// 	text: '核对人员名称',
					// 	align: 'center',
					// 	value: 'check_username',
					// 	filterable: false,
					// 	class: 'fixed'
					// },
					{
						text: '客户名称',
						align: 'center',
						value: 'customername',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '客户编码',
						align: 'center',
						value: 'customercode',
						filterable: false,
						class: 'fixed'
					},

					{
						text: '项目号',
						align: 'left',
						value: 'project.citemcode',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '项目名称',
						align: 'left',
						value: 'project.citemname',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '设备描述',
						align: 'left',
						value: 'description',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '申请审批描述',
						align: 'left',
						value: 'approval.applydescription',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '审批状态',
						align: 'center',
						value: 'approval.approvalstatusname',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '审批类型',
						align: 'center',
						value: 'approval.approvaltypename',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '审批人回复',
						align: 'left',
						value: 'approval.approvaldescription',
						filterable: false,
						class: 'fixed'
					},
				]
			},
		}
	}
</script>

<style>
</style>
